<template>
    <div class="speech">
        <!-- <h1 style="color: #f66;">二层</h1> -->
        <div class="dormitoryBox">
            <div class="dormitoryItem" v-for="(item, index) of dormitoryArr" :key="item.id">
                <div class="topTit">{{ item.numbers }}宿舍</div>
                <div class="contentInfo">
                    <div id="260023610019" class="center1 flex dorm-box-list">
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                    </div>
                    <div class="flex" style="height: 50px;">
                        <div>
                            <img src="../../../static/wendu.png" style="width: 16px;">
                            <span class="color-font font14">19℃</span>
                        </div>
                        <div><img src="../../../static/shidu.png" style="width: 16px;"> <span
                                class="color-font font14">25%</span></div>
                    </div>
                </div>
                <div id="260023610019nums" class="color-font font18 center">人数：{{ item.number }}人</div> 
            </div>

        </div>
    </div>
</template>

<script setup>

import { ref } from "vue";

let dormitoryArr = ref([])

let dormitoryArray = [
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 339,
    "numbers": "301",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[22],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 340,
    "numbers": "302",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[70],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 341,
    "numbers": "303",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[24],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 342,
    "numbers": "304",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[10],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 343,
    "numbers": "305",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "重复",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 344,
    "numbers": "306",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[12],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 345,
    "numbers": "307",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[18],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 346,
    "numbers": "308",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[23],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 347,
    "numbers": "309",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[21],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 348,
    "numbers": "310",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层男生水房",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 349,
    "numbers": "311",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[25],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 350,
    "numbers": "312",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层男生卫生间",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 351,
    "numbers": "313",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "重复",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 352,
    "numbers": "315",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[63],[113]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 353,
    "numbers": "316",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层女生卫生间",
    "deviceKey": "[115],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 354,
    "numbers": "317",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[66],[119]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 355,
    "numbers": "318",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层女生水房",
    "deviceKey": "[120],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 356,
    "numbers": "319",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[61],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 357,
    "numbers": "320",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[60],[121]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 358,
    "numbers": "321",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层老师宿舍5",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 359,
    "numbers": "322",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[62],[110]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 360,
    "numbers": "323",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": "三层女宿管",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 361,
    "numbers": "324",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[45],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 362,
    "numbers": "325",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[56],[124]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 363,
    "numbers": "326",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[46],[123]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 364,
    "numbers": "327",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[55],[125]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 365,
    "numbers": "328",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[58],[122]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 366,
    "numbers": "329",
    "storey": "3层",
    "status": 0,
    "floor": "108",
    "remarks": null,
    "deviceKey": "[51],[117]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 108,
    "number": 10,
    "numberReal": 0
  }
]

dormitoryArr.value = dormitoryArray
</script>

<style scoped>
.dormitoryBox {
    width: 100%; 
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.dormitoryItem {
    width: 150px;
    height: 162px;
    background-repeat: no-repeat;
    background-image: url(../../../static/sstj-item.png);
    background-size: 100% auto;
    margin: 5px;
}

.topTit {
    width: 100%;
    color: #89bfff;
    padding-top: 20px;
    font-size: 18px;
    text-align: center;
}

.contentInfo {
    width: 90px;
    height: 70px;
    border-top: 1px solid #394B8F;
    border-bottom: 1px solid #394B8F;
    margin: 2px auto;
    color: #89bfff;
    text-align: center;
}

.dorm-box-list {
    flex-wrap: wrap;
    height: 20px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dorm-person {
    width: 5px;
    height: 5px;
    background-color: #ff0000;
    margin: 2px;
}
</style>